<template>
  <div class='article-container'>
    <!--
      List 列表组件：瀑布流滚动加载，用于展示长列表。

      List 组件通过 loading 和 finished 两个变量控制加载状态，
      当组件初始化或滚动到到底部时，会触发 load 事件并将 loading 自动设置成 true，此时可以发起异步操作并更新数据，
      数据更新完毕后，将 loading 设置成 false 即可。
      若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

      - load 事件：
        + List 初始化后会触发一次 load 事件，用于加载第一屏的数据。
        + 如果一次请求加载的数据条数较少，导致列表内容无法铺满当前屏幕，List 会继续触发 load 事件，直到内容铺满屏幕或数据全部加载完成。

      - loading 属性：控制加载中的 loading 状态
        + 非加载中，loading 为 false，此时会根据列表滚动位置判断是否触发 load 事件（列表内容不足一屏幕时，会直接触发）
        + 加载中，loading 为 true，表示正在发送异步请求，此时不会触发 load 事件

      - finished 属性：控制加载结束的状态
        + 在每次请求完毕后，需要手动将 loading 设置为 false，表示本次加载结束
        + 所有数据加载结束，finished 为 true，此时不会触发 load 事件
     -->
    <!-- <div v-if="list.length !== 0">暂无数据</div> -->
    <van-empty v-if="list.length == 0" description="暂无数据" />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :success-text="refreshSuccessText"
      success-duration="1500" v-else>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
        :error.sync="error" error-text="请求失败，点击重新加载">
        <!-- <van-cell v-for="article in list" :key="article.art_id" :title="article.title" /> -->
        <article-item v-for="(article, index) in list" :key="index" :article = "article"/>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { getArticles } from '@/api/article.js';
import ArticleItem from '@/components/article-item';
export default {
  name: 'ArticlePage',
  components: {
    ArticleItem
  },
  props: {
    channel: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      list: [], // 存储列表数据的数组
      loading: false, // 控制加载中 loading 状态
      finished: false, // 控制数据加载结束的状态
      timestamp: '',
      error: false, // 列表数据加载状态
      isLoading: false, // 下拉刷新状态
      refreshSuccessText: '刷新成功'// 刷新成功提示文案
    };
  },
  created() {
    this.onLoad()
  },
  computed: {},
  methods: {
    // 下拉刷新时会触发 refresh 事件
    // onRefresh() {
    //   this.list = []
    //   this.timestamp = Date.now()
    //   this.loading = true
    //   this.isLoading = false
    //   this.onLoad()
    // },
    onRefresh() {
      getArticles({
        channel_id: this.channel.id, // 频道ID
        timestamp: Date.now(),
        with_top: 1,
      })
        .then((res) => {
          // 1.展开运算符形式
          this.list.unshift(...res.results);
          this.isLoading = false;
          this.refreshSuccessText = '刷新成功，更新了'+ res.results.length +'条数据';
        })
        .catch((err) => {
          this.isLoading = false;
          this.refreshSuccessText = '刷新失败'
          console.log(err);
        });
    },
    onLoad() {
      console.log(1, Date.now());
      getArticles({
        channel_id: this.channel.id, // 频道ID
        // 你可以把 timestamp 理解为页码
        // 如果请求第1页数据：当前最新时间戳 Date.now
        // 如果请求之后的数据，使用本次接口返回的数据中的 pre_timestamp
        timestamp: this.timestamp || Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
        with_top: 1, // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
      })
        .then((res) => {
          // 1.展开运算符形式
          // this.list.push(...res.results)
          // 2.数组连接形式
          this.list = this.list.concat(res.results || []);
          // 本次数据加载结束之后要把加载状态设置为结束
          this.loading = false;
          // 判断数据是否全部加载完成
          if (res.results.length < 1) {
            this.finished = true; // 表示数据全部加载完成
          } else {
            this.timestamp = res.pre_timestamp;
          }
        })
        .catch((err) => {
          // 展示错误提示状态
          this.error = true;
          // 失败了 Loading也要关闭
          this.loading = false;
          console.log(err);
        });
    },
    // onLoad() {
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1);
    //     }

    //     // 加载状态结束
    //     this.loading = false;

    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    // },
  },
};
</script>
<style lang='less' scoped>
.article-container {
  // height: 79vh;
  height: calc(100vh - 274px);
  overflow-y: auto;
}
</style>
